<template>
	<view>
		<view class="page-body">
			<view class="swiper">
				<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item>
						<image class="image swiper-item" src="../../static/banner/banner1.png" />
					</swiper-item>
					<swiper-item>
						<image class="image swiper-item" src="../../static/banner/banner2.png" />
					</swiper-item>
					<swiper-item>
						<image class="image swiper-item" src="../../static/banner/banner3.png" />
					</swiper-item>
				</swiper>
			</view>
			<view class="notice">
				<view class="notice_1">
					<view class="notice-icon">
						<span style="background: url(../../static/index/icon_speaker.png) center center no-repeat;background-size: 50%;width: 100%;height: 25px;display: inline-block; background-color:rgba(47,47,47,0.6);"></span>
					</view>
					<view class="notice-area">
						<view class="bd">
							<marquee class="div_notice" style="color:#fff;font-size: 12px;width: 85%;float: right;height: 25px;" align="left"
							 behavior="scroll" direction="left" height="42" hspace="0" vspace="0" loop="-1" scrollamount="1.5" scrolldelay="30"
							 onmouseout="this.start()" onmouseover="this.stop()">欢迎光临</marquee>
						</view>
					</view>
					<view class="cl"></view>
				</view>
			</view>

			<view class="page-section play">

				<view class="uni-flex uni-row">
					<view class="text m-right" style="width: 200upx;height: 220upx; justify-content: center;align-items: center;">
						<view class="title-text iw-a" style="flex: 1;">彩票游戏</view>
						<view class="" style="flex: 1;">
							<image src="../../static/index/icon_lotto.png" style="width: 110upx;height: 100upx; margin-top:22upx"></image>
						</view>

					</view>
					<view class="uni-flex uni-column" style="width: 200upx;height: 220upx;flex: 1;justify-content: space-between;">
						<view class="uni-flex ">
							<view class="text m-top" style="flex: 1;" @tap="goBrowser('VR',0)">VR彩票</view>
							<!-- <view class="text m-top m-right" style="flex: 1;" @tap="goBrowser('BBIN','Ltlottery')">BBIN彩票</view> -->
						</view>
						<view class="uni-flex ">
							<view class="text m-top" style="flex: 1;" @tap="goBrowser('BBIN','Ltlottery')">BBIN彩票</view>
						</view>
					</view>
				</view>
				<view class="uni-flex uni-row">
					<view class="text m-right" style="width: 200upx;height: 220upx; justify-content: center;align-items: center;">
						<view class="title-text iw-a" style="flex: 1;">真人娱乐</view>
						<view class="" style="flex: 1;">
							<image src="../../static/index/icon_casino.png" style="width: 110upx;height: 100upx; margin-top:22upx"></image>
						</view>

					</view>
					<view class="uni-flex uni-column" style="width: 200upx;height: 220upx;flex: 1;justify-content: space-between;">
						<view class="uni-flex ">
							<view class="text m-right m-top" style="flex: 1;" @tap="goBrowser('DS',0)">DS视讯</view>

							<view @tap="goBrowser('BAISHA',0)" class="text m-right m-top" style="flex: 1;" hover-class="navigator-hover">
								白沙视讯
							</view>

						</view>
						<view class="uni-flex ">
							<view class="text m-right" style="flex: 1;" @tap="goBrowser('BBIN','live')">BBIN视讯</view>
							<view class="text" style="flex: 1;" @click="show">尽请期待</view>
						</view>
					</view>
				</view>

				<!-- <view class="uni-flex uni-row">
					<view class="text m-right" style="width: 200upx;height: 220upx; justify-content: center;align-items: center;">
						<view class="title-text" style="flex: 1;">体育赛事</view>
						<view class="" style="flex: 1;">
							<image src="../../static/index/icon_sport.png" style="width: 110upx;height: 100upx; margin-top:22upx"></image>
						</view>

					</view>
					<view class="uni-flex uni-column" style="width: 200upx;height: 220upx;flex: 1;justify-content: space-between;">
						<view class="uni-flex ">
							<view class="text m-right m-top" style="flex: 1;">尽请期待</view>
							<view class="text m-top" style="flex: 1;">尽请期待</view>
						</view>
						<view class="uni-flex ">
							<view class="text m-right" style="flex: 1;">尽请期待</view>
							<view class="text " style="flex: 1;">尽请期待</view>
						</view>
					</view>
				</view> -->
				<view class="uni-flex uni-row">
					<view class="text m-right" style="width: 200upx;height: 220upx; justify-content: center;align-items: center;">
						<view class="title-text iw-a" style="flex: 1;">KY棋牌</view>
						<view class="" style="flex: 1;">
							<image src="../../static/index/kyGame.png" style="width: 110upx;height: 100upx; margin-top:22upx"></image>
						</view>

					</view>
					<view class="uni-flex uni-column" style="width: 200upx;height: 220upx;flex: 1;justify-content: space-between;">
						<view class="uni-flex ">
							<view class="text m-right m-top" style="flex: 1;" @tap="goBrowser('KY',830)">抢庄牛牛</view>
							<view class="text m-top" style="flex: 1;" @tap="goBrowser('KY',220)">扎金花</view>
						</view>
						<view class="uni-flex ">
							<view class="text m-right" style="flex: 1;" @tap="goBrowser('KY',620)">德州扑克</view>
							<view class="text" style="flex: 1;" @tap="goBrowser('KY',0)">更多游戏</view>
						</view>
					</view>
				</view>

				<view class="uni-flex uni-row">
					<view class="text m-right" style="width: 200upx;height: 220upx; justify-content: center;align-items: center;">
						<view class="title-text iw-a" style="flex: 1;">电子娱乐</view>
						<view class="" style="flex: 1;">
							<image src="../../static/index/icon_game.png" style="width: 110upx;height: 100upx; margin-top:22upx"></image>
						</view>

					</view>
					<view class="uni-flex uni-column" style="width: 200upx;height: 220upx;flex: 1;justify-content: space-between;">
						<view class="uni-flex ">
							
							<view class="text m-right m-top" style="flex: 1;" @tap="goBrowser('PG',0)">PG电子</view>
							<view class="text m-top" style="flex: 1;" @tap="goBrowser('BBIN','game')">BBIN电子</view>

						</view>
						<view class="uni-flex ">
							<view class="text m-right" style="flex: 1;" @click="show">尽请期待</view>
							<view class="text" style="flex: 1;" @click="show">尽请期待</view>
						</view>
					</view>
				</view>

			</view>
			<view class="play">
				<!-- <div class="ps-r">
					<div class="po-up th_promos">优惠活动</div>
					<div class="po-down">敬请期待</div>
				</div> -->
			</view>
		</view>
		<!-- 弹出层 -->
		<view class="mask" v-show="showMask" @click="hide"></view>
		<view class="popup  pop-middle" v-show="showState.middle">
			<view class="desc">
				<image class="closed" @click="hide" src="../../static/closed.png" />
				<view class="title">额度转换</view>
				<view class="input-list">
					<view class="uni-list-cell">
						<view class="list-left">
							{{ name }}余额：
						</view>
						<input class="uni-input" name="input" v-model="gameAccount" disabled />
					</view>
				</view>
				<view class="input-list">
					<view class="uni-list-cell">
						<view class="list-left">
							主账号余额：
						</view>
						<input class="uni-input" name="input" v-model="mainAccount" disabled/>
					</view>
				</view>

				<view class="input-list">
					<view class="uni-list-cell">
						<view class="list-left">
							转入{{ name }}游戏：
						</view>
						<input class="uni-input" name="input" v-model="money" placeholder="转入金额" />
					</view>
				</view>
				<view class="uni-flex uni-row" style="justify-content: center;">
					<view class="gameIn"><button class="btn-submit" @tap="moneyCharge(money)" :loading="loading">转账并进入</button></view>
					<view class="gameInto"><button type="default" formType="reset" @tap="enter()">直接进入</button></view>
				</view>

			</view>
		</view>
		<!-- 弹出层 -->
		<view>

			<div class="cpr">Copyright © 2006-<span id="year-local">2018</span> 传奇Online </div>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				showState: {
					top: false,
					middle: false,
					bottom: false
				},
				showMask: false,
				activePop: 'middle',
				name: '',
				gameId: '',
				gameAccount: '0',
				mainAccount: '0'
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'apiUrl', 'userName', 'gameApiUrl', 'token', 'gameApiSecret']),
		onLoad() {

		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},

			show: function(name, gameId) {
					this.gameAccount = 0,
					this.mainAccount = 0,
					this.money = 0,
				    this.name = name,
					this.gameId = gameId,
					this.showMask = true,
					this.showState[this.activePop] = true,
					this.getMoney(1, this.name),
					this.getMoney(0, '_main')
			},
			hide() {
				this.showMask = false
				this.showState[this.activePop] = false
			},
			getMoney: function(index, platform) {
				const data = {
					platform: platform,
					token: this.token,
					f: 1,
				};
				uni.request({
					url: this.apiUrl + 'app/balance',
					data: data,
					method: 'POST',
					success: (data) => {
						if (data.data.code == 1) {
							if (index == 1) {
								this.gameAccount = data.data.data
							} else {
								this.mainAccount = data.data.data
							}
							//console.log('5525r' + this.grids[index].money);
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}

				})
			},
			moneyCharge: function(e) {
				this.hide();
				if (this.money.length < 1) {
					uni.showToast({
						icon: 'none',
						title: '金额不能为空'
					});
					return;
				}

				const data = {
					inaccount: this.name.toLowerCase(),
					outaccount: "_main",
					money: this.money,
					token: this.token,
				};
				this.loading = true;
				uni.request({
					url: this.apiUrl + 'app/transfer',
					data: data,
					method: 'POST',
					success: (data) => {
						let msg = data.data.msg;
						uni.showToast({
							icon: 'none',
							title: msg
						});
						if (data.data.code == 1) {
							// this.getData();
							//this.playGame(this.name, this.gameId)
							this.enter();
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: () => {
						this.loading = false
					}
				})


			},
			enter() {
				this.hide();
				// #ifdef APP-PLUS
				if(this.name=='PG'){
					uni.navigateTo({
						url: '../game/pg/list'
					})
					
				}else{
					plus.runtime.openURL(this.gameApiUrl + '?api_method=playGame&username=' + this.userName + '&api_name=' + this.name +
						'&game=' + this.gameId +
						'&device=2');
				}
				
				
				// #endif
				// #ifdef MP-WEIXIN
				if(this.name=='PG'){
					uni.navigateTo({
						url: '../game/pg/list'
					})
					
				}
				uni.showModal({
					content: "请复制链接在浏览器里打开",
					showCancel: false
				})
				// #endif

			},
			goBrowser: function(api_name, game_id) {
				if (!this.hasLogin) {
					uni.showModal({
						title: '未登录',
						content: '您未登录，需要登录后才能玩游戏',
						/**
						 * 如果需要强制登录，不显示取消按钮
						 */
						//showCancel: !this.forcedLogin,
						success: (res) => {
							if (res.confirm) {
								/**
								 * 如果需要强制登录，使用reLaunch方式
								 */
								uni.navigateTo({
									url: '../user/login'
								})
							} else {
								uni.navigateBack();
							}
						}
					});
				} else {
					this.show(api_name, game_id);

				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #161213;
	}

	.swiper-item {
		display: block;
		height: 300upx;
		line-height: 300upx;
		text-align: center;
		width: 100%;
	}

	.pop-middle {
		width: 80%;
		height: 500upx;
		border-radius: 10rpx;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;

	}

	.closed {
		width: 40rpx;
		height: 40rpx;
		position: absolute;
		right: 15rpx;
		top: 11rpx;

	}

	.swiper-list {
		margin-top: 40upx;
		margin-bottom: 0;
	}

	.page-section-title {
		padding: 0;
		margin-top: 60upx;
		position: relative;
	}

	.iw-a {
		margin-top: 1em;

		color: #dfc784;
	}

	.notice {
		background: rgba(47, 47, 47, 0.6);
		height: 25px;
		line-height: 25px;
		margin-bottom: 10px;
	}

	.notice-icon {
		position: absolute;
		color: #fff;
		width: 10%;
		z-index: 111;
		height: 25px;
	}

	.cl {
		clear: both;
	}

	.info {
		position: absolute;
		right: 0;
		color: #353535;
		font-size: 30upx;
	}

	.flex-item {
		width: 200upx;
		height: 300upx;
		text-align: center;
		line-height: 300upx;
		font-size: 26upx;
	}

	.flex-item-V {
		margin: 0 auto;
		width: 300upx;
		height: 200upx;
		text-align: center;
		line-height: 200upx;
	}

	.title-text {
		height: 60upx;
	}

	.text {
		background-color: #1e1e1e;
		height: auto;
		line-height: 110upx;
		text-align: center;
		color: white;
		font-size: 30upx;
	}

	.m-top {
		border-bottom: 1px solid #323031;
	}

	.m-right {
		border-right: 1px solid #323031;
	}

	.uni-row {
		margin-bottom: 10upx;
	}

	.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		opacity: 0.3;
		background: #000;
	}

	.popup {
		position: absolute;
		z-index: 999;
		background-color: #ffffff;
		-webkit-box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
	}

	.popup-middle {
		width: 400upx;
		height: 200upx;
		border-radius: 10upx;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
	}

	.popup-top {
		top: 0;
		width: 100%;
		height: 100upx;
		text-align: center;
	}

	.popup-top text {
		line-height: 100upx;
		margin-left: 20upx;
		font-size: 32upx;
	}

	.popup-bottom {
		bottom: 0;
		width: 100%;
		height: 100upx;
		text-align: center;
	}

	.popup-bottom text {
		line-height: 100upx;
		font-size: 32upx;
	}

	.popup .list-view {
		height: 600upx;
	}

	.list-view-item {
		position: relative;
		padding: 22upx 30upx;
		overflow: hidden;
		font-size: 28upx;
	}

	.list-view-item::after {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 30upx;
		height: 2upx;
		content: '';
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		background-color: #c8c7cc;
	}

	.btn-row .btn {
		margin: 20upx;
	}

	.title {
		font-size: 38upx;
		margin-bottom: 20upx;
	}

	.desc {
		padding: 40upx 20upx;
		font-size: 30upx;
		line-height: 30upx;
		text-align: center;
	}

	.cpr {
		color: #72777b;
		font-size: 12px;
		height: 26px;
		margin-bottom: 1em;
		text-align: center;
	}


	.play {
		color: #fff;
		font-size: 15px;
		text-align: center;
	}

	.ps-l,
	.ps-r {
		height: 110px;
		background: rgba(47, 47, 47, 0.4);
		border-radius: 5px;
		float: left;
	}

	.ps-l {
		width: 100%;
		margin-right: 3px;
	}

	.ps-r {
		width: 100%;
		float: right;
		height: 55px;
		margin-top: 5px;
	}

	.po-up,
	.po-down {
		height: 55px;
		line-height: 55px;
		width: 49%;
		display: inline-block;
	}

	.po-up {
		border-right: 1px solid #323031;
	}

	.list-left {
		width: 400upx;
		text-align: right;
		padding-left: 0upx;

	}

	.gameIn {
		margin-right: 20upx;
	}
</style>
